<template>
  <div class="my">
    <page-header title="我的" :bgShow="false" class="header"></page-header>
    <div class="my-top">
      <div class="avatar"><img :src="data.avatar || avatar"></div>
      <p class="username">{{data.studentName || '用户名'}}</p>
      <p class="phone">{{data.mobile || ''}}</p>
      <p class="register" @click="_out()">退出</p>
    </div>
    <ul v-if="!isPin" class="nav">
      <li @click="_turnCase()"><router-link to="">我的报名</router-link></li>
      <li><router-link to="/personal/order">我的预约</router-link></li>
      <!--<li><router-link to="/personal/card">我的参赛证</router-link></li>-->
      <!--<li><router-link to="/personal">电子发票</router-link></li>-->
      <li><router-link to="/personal/ticket">我的优惠券</router-link></li>
    </ul>
    <ul v-if="isPin" class="nav">
      <li @click="goPin()" style="background:#fff"><router-link to="">核销</router-link></li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
import PageHeader from 'components/page-header'
import avatarInit from '../assets/image/avatar.png'
import * as exampleApi from 'api/example'
import { commonOption } from 'api/config'
import wx from 'weixin-js-sdk'

export default {
  components: {
    PageHeader
  },
  data () {
    return {
      avatar: avatarInit,
      data: {},
      cases: {},
      text: {},
      isPin: false,
      optId: '',
      openId: ''
    }
  },
  created() {
    this.optId = sessionStorage.getItem('studentId')
    this.openId = sessionStorage.getItem('openId')
    let userType = sessionStorage.getItem('userType')
    this.isPin = false
    if (userType === '1') {
      this.isPin = true
    }
    this.asd()
    this._initData()
  },
  methods: {
     _initData() {
      // 发送请求 mock
      let response = {
        studentId: sessionStorage.getItem('studentId'),
        studentName: sessionStorage.getItem('studentName'),
        mobile: sessionStorage.getItem('mobile'),
        avatar: sessionStorage.getItem('wxAvatar')
      }
      this.data = response
    },
    asd() {
       if (sessionStorage.getItem('studentId') === '-1') {
        alert('您尚未登录，请先登录')
        this.$router.push({path: '/login'})
      } else {
       }
    },
    _turnCase() {
      this.$router.push({
         path: `/personal/reservation`
       })
    },
    _out() {
      exampleApi.modePost('/api/public/sys/user/exit', {
        userId: this.optId,
        openId: this.openId
      }).then(
        res => {
          alert('退出成功')
          window.sessionStorage.setItem('studentId', '-1')
          window.sessionStorage.setItem('studentName', '-1')
          window.sessionStorage.setItem('userType', '')
          this.$router.push({path: '/home'})
        }
      )
    },
    goPin() {
      let appId = sessionStorage.getItem('appId')
      let thisPageUrl = window.location.href.split('#')[0]
      exampleApi.modePost2(commonOption.payment_host + '/wxConfig', {
        'url': thisPageUrl,
        'appId': appId
      }).then(res => {
        wx.config({
          'debug': false,
          'appId': res.data.obj.appid,
          'timestamp': res.data.obj.timestamp,
          'nonceStr': res.data.obj.nonceStr,
          'signature': res.data.obj.signature,
          'jsApiList': ['scanQRCode']
        })
        wx.ready(() => {
          wx.scanQRCode({
            needResult: 1,
            success: function (res) {
              let orderId = JSON.parse(res.resultStr)
              exampleApi.modePost('/api/public/wz/activity/pin', {
                pinId: this.optId,
                orderId: orderId
              }).then(res => {
                  alert(res.msg)
                }
              )
            },
            error: function(res) {
              alert('核销失败！')
            }
          })
        })
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.my{
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #e6e6e6;
  font-family: Ping Fang;
  .header{
    position: absolute;
    left: 0;
    top: 0;
  }
  .register {
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    color: black;
    font-weight: bold;
  }
  .my-top{
    width: 100%;
    height: 424px;
    background: url('../assets/image/personal/bg.png') no-repeat center / cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding-top: 84px;
    .avatar{
      width: 120px;
      height: 120px;
      background-color: #dddddd;
      border: solid 11px #ffffff;
      border-radius: 50%;
      display: flex;
      align-items:center;
      justify-content: center;
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .username {
      font-size: 32px;
      color: #ffffff;
      margin: 28px 0 22px 0;
      font-family: 'PingFang-SC';
    }
    .phone{
      width: 234px;
      height: 40px;
      line-height: 40px;
      background-color:rgba(255,255,255,0.3);
      border-radius: 20px;
      font-size: 24px;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      &::before {
        display: inline-block;
        vertical-align: middle;
        content: '';
        width: 24px;
        height: 24px;
        background: url('../assets/image/icon_phone.png') no-repeat left center / 17px 24px;
      }
    }
  }
  .nav{
    margin-top: 20px;
    width: 100%;
    padding-left: 23px;
    box-sizing: border-box;
    background-color: #fff;
    li{
      width: 100%;
      height: 85px;
      line-height: 85px;
      box-sizing: border-box;
      padding-right: 44px;
      border-bottom: 1px solid #ccc;
      font-size: 0;
      background: url('../assets/image/icon_arrow_right.png') no-repeat right 23px center / 17px auto;
      display: flex;
      align-items: center;
      a{
        display: inline-block;
        width: 100%;
        height: 100%;
        font-size: 28px;
        color: #333333;
        font-family: PingFang-SC;
        font-size: 28px;
        letter-spacing: 0px;
        color: #333333;
        &::before{
          display: inline-block;
          vertical-align: middle;
          content: '';
          width: 50px;
          height: 30px;
          background: url('../assets/image/personal/icon.png') no-repeat;
          background-size: 31px auto;
          background-position: 0px 0px;
        }
      }
      &:nth-last-child(1) {
        border-bottom: none;
      }

      &:nth-child(2) {
        a::before{
          background-position-y: -88px;
        }
      }
      &:nth-child(3) {
        a::before{
          background-position-y: -172px;
        }
      }
      &:nth-child(4) {
        a::before{
          background-position-y: -260px;
        }
      }
      &:nth-child(5) {
        a::before{
          background-position-y: -346px;
        }
      }
    }
  }
}

</style>
